<script setup lang="ts">
import { ref } from 'vue'
import { getAuthListApi } from '@/apis/auth'
import type { getAuthApi } from '@/types/auth'

// 获取权限列表
const authList = ref([] as getAuthApi[])
const getAuthList = async () => {
  const res = await getAuthListApi()
  authList.value = res.data.data as getAuthApi[]
  // console.log(authList.value)
}
getAuthList()

// 删除权限
const delAuth = (row: getAuthApi) => {}
</script>

<template>
  <el-card>
    <el-table
      :data="authList"
      border
      row-key="auth_id"
      :tree-props="{ children: 'children' }"
      default-expand-all
    >
      <el-table-column prop="auth_name" label="权限名称" align="center"></el-table-column>
      <el-table-column prop="type" label="种类" align="center">
        <template v-slot="{ row }">
          <el-tag :type="row.type === 1 ? 'primary' : 'danger'">{{
            row.type === 1 ? '菜单' : '按钮'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由" align="center"></el-table-column>
      <el-table-column prop="keep_alive" label="组件缓存" align="center">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.keep_alive"
            active-text="已缓存"
            inactive-text="未缓存"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            style="--el-switch-on-color: #ff9292; --el-switch-off-color: #6ee0a1"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="component" label="组件路径" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" v-auth="{ name: '用户编辑' }">编辑</el-button>
          <el-button type="danger" @click="delAuth(row)" v-auth="{ name: '用户删除' }"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped lang="scss"></style>
